<template>
	<view class="">
		<view class="tabs-box">
			<u-tabs :list="list1" @change="changeTab" :current="currTab"></u-tabs>
		</view>
		<view class="content" v-show="showIndex">
			<u--form labelPosition="left" :model="reqData" :rules="rules" ref="applform1" :style="{width: '95%' }"
				class="content">
				<u-form-item :labelWidth="15" prop="title" borderBottom>
					<view class="input-box">
						<input maxlength="15" v-model="reqData.title" class="uni-input" type="number"
							placeholder="请输入标题 ( 15字内 )" placeholder-style="font-weight: 600"
							@blur="reqData.title = reqData.title.replace(/\s*/g,'')"></input>
					</view>
				</u-form-item>
				<u-form-item :labelWidth="15" prop="content" borderBottom>
					<u--textarea v-model="reqData.content" height="300" :maxlength="200" border="none"
						placeholder="请输入详细描述"></u--textarea>
				</u-form-item>
			</u--form>
			<view style="margin-top: 20rpx">
				<u-upload :fileList="tempImgs" @afterRead="afterRead" @delete="deletePic" name="1" multiple> </u-upload>
			</view>
			<view style="height: 220rpx;"></view>
		</view>
		<at-submit-btn v-show="showIndex" txt="发布" @submit="submit"></at-submit-btn>
		<view v-show="!showIndex">
			<Recod :list="list"></Recod>
		</view>
	</view>
</template>

<script>
	import AtSubmitBtn from '@/components/AtSubmitBtn'
	import Recod from 'pages/appeal/recod.vue'
	import {
		formatBr
	} from '@/utils/formatBr.js'
	import {
		userappeallist, userupappeal
	} from '@/common/http.api.js'
	export default {
		components: {
			AtSubmitBtn,
			Recod
		},
		data() {
			return {
				uname:'',
				list: [],
				tempImgs: [],
				serverImg: [],
				showIndex: true,
				currTab: 0,
				list1: [{
					type: '0',
					name: '诉求发布',
				}, {
					type: '1',
					name: '反馈记录',
				}],
				rules: {
					title: {
						required: true,
						message: '请填写标题'
					},
					content: {
						required: true,
						message: '请填写正文'
					}
				},
				serverUrl: 'http://127.0.0.1:3000/index/upload-Imgs',
				reqData: {
					uID: uni.getStorageSync('uID'),
					title: '',
					content: '',
					appeal_imgs: []
				},
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.applform1.setRules(this.rules)
		},
		onShow() {
			this.uname = this.$store.state.userInfo.uname
		},
		methods: {
			 changeTab(item) {
				this.currTab = item.index
				// // 点击tabs切换
				if (this.currTab === 0) {
					this.showIndex = true
				} else {
					uni.$loading()
					 this.getUserappealList()
					this.showIndex = false
				}
			},
			async getUserappealList() {
				const res = await userappeallist({
					uID: uni.getStorageSync('uID')
				})
				this.list = res.data
			},
			submit() {
				// console.log(this.serverImg);
				this.$refs.applform1.validate().then(async () => {
					uni.$loading()
					// 处理换行
					this.reqData.uname = this.uname
					this.reqData.appeal_imgs = this.serverImg
					this.reqData.content = formatBr(this.reqData.content)
					const res = await userupappeal(this.reqData)
					if (res.code == 0) uni.$showMsg('发布成功', 'success', 1200)
					this.reqData.title = ''
					this.reqData.appeal_imgs = [],
					this.serverImg= []
					this.tempImgs = []
					this.reqData.content = ''
					await this.getUserappealList()
					this.showIndex = false
					this.currTab = 1
					
				})
			},
			// 删除图片
			deletePic(event) {
				this.tempImgs.splice(event.index, 1)
				this.serverImg.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				// console.log(event);
				// console.log(this[`fileList${event.name}`]);
				let fileListLen = this.tempImgs.length
				lists.map((item) => {
					this.tempImgs.push({
						...item,
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.tempImgs[fileListLen]
					this.tempImgs.splice(fileListLen, 1, Object.assign(item, {
						url: result
					}))

					fileListLen++
				}
			},
			// 上传到服务器
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.serverUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'imgs',
						header: {
							'Content-Type': 'multipart/form-data'
						},
						success: (res) => {
							const fliedata = JSON.parse(res.data);
							// console.log(fliedata);
							if (fliedata.code == 0) {
								const newFile = fliedata.data;
								//照片数组
								this.serverImg.push(newFile)
							}

						}
					});
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		width: 90%;
		margin: auto;
	}

	.textarea-box {
		background-color: #eee;
	}

	.input-box {
		display: flex;
		justify-content: space-between;
	}

	.uni-input {
		font-weight: bold;
	}

	.placeholder-box {
		font-size: 13px;
		padding: 6rpx 15rpx;
		border-radius: 30rpx;
		color: #fff;
		background-color: #96c1ff;
	}

	.blodfont {
		font-weight: 600 !important;
	}

	.tabs-box {
		background-color: #fff;
		width: 100%;

		/deep/.u-tabs__wrapper__nav__item {
			padding: 0 120rpx;
		}
	}

	/deep/.u-form .u-form-item .u-form-item__body {
		padding: 30rpx 0;
	}

	/deep/.u-form .u-form-item .u-form-item__body .u-form-item__body__left .u-form-item__body__left__content__required {
		font-size: 0;
	}

	/deep/.u-form .u-form-item .u-form-item__body .u-form-item__body__right .u-form-item__body__right__content .u-form-item__body__right__content__slot {
		// font-weight: bold ;
	}

	/deep/.u-form .u-form-item .u-form-item__body .u-form-item__body__left__content .u-form-item__body__left__content__label {
		font-weight: bold;
	}
</style>
